<!--  -->
<template>
  <div class="layout">
    <div class="inner">
      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group> -->
      <div class="header">
        <div class="logoBox">
          <img src="@/images/1.jpg" alt="" class="logo" />
          <div>雾气</div>
        </div>
      </div>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        text-color="black"
        active-text-color="#ffd04b"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <router-link to="/" class="rl">
          <el-menu-item index="0" router="true">
            <i class="el-icon-s-home"></i>
            <span slot="title">主页</span>
          </el-menu-item>
        </router-link>
        <router-link to="/book" class="rl">
          <el-menu-item index="1" router="true">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">书籍管理</span>
          </el-menu-item>
        </router-link>

        <router-link to="/blog" class="rl">
          <el-menu-item index="2" router="true">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">博客管理</span>
          </el-menu-item>
        </router-link>

        <router-link to="/video" class="rl">
          <el-menu-item index="3" router="true">
            <i class="el-icon-video-camera"></i>
            <span slot="title">视频管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/resources" class="rl">
          <el-menu-item index="4" router="true">
            <i class="el-icon-folder-opened"></i>
            <span slot="title">资源管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/Map" class="rl">
          <el-menu-item index="5" router="true">
            <i class="el-icon-folder-opened"></i>
            <span slot="title">地图服务练习</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </div>
    <div class="view">
      <router-view
        @markdownText="get"
        :markdownText="markdownText"
      ></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      markdownText: "",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 定时注销(十分钟)
    setTimeLogOut() {
      setTimeout(() => {
        localStorage.removeItem("token");
        this.$router.replace("/user");
      }, 600000);
    },
    logout() {
      try {
        localStorage.removeItem("token");
        this.$router.replace("/user");
      } catch (error) {
        console.log(error);
      }
    },
    get(val) {
      console.log("我接受到了！", val);
      this.markdownText = val;
    },
  },
  created() {
    this.setTimeLogOut();
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 300px;
  height: calc(100vh - 40px);
  overflow: auto;
  /* border-right: 1px solid red; */
}

.view {
  width: 100%;
}
.layout {
  display: flex;
}

.rl {
  text-decoration: none;
}
#out {
  margin-top: 20px;
  margin-left: 20px;
}
.header {
  width: 99.5%;
  /* background: #545c64; */
  text-align: center;
  line-height: 40px;
  color: black;
  font-weight: 600;
  letter-spacing: 6px;
  
}
.logoBox{
  width: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.logo {
  height: 25px;
  width: 25px;
  margin-right: 5px;
}
</style>